<template>
  <div>
    <a-divider orientation='center' style='margin-bottom: 50px;margin-top: 50px;'>
      已提交情况
    </a-divider>
    
    <div class='table-page-search-wrapper' style='margin-bottom: 15px;'>
      <a-form layout='inline'>
        <a-row :gutter='48'>
          <a-col :md='8' :sm='24'>
            <a-form-item label='姓名'>
              <a-input v-model='queryParam.nickName' placeholder='请输入姓名或关键字' />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-form-item label='学号'>
              <a-input v-model='queryParam.studentId' placeholder='请输入学号(支持模糊匹配)' />
            </a-form-item>
          </a-col>
          <a-col :md='8' :sm='24'>
            <a-button type='primary' @click='getSubList'>搜索</a-button>
            <a-button style='margin-left: 20px;' @click='reset'>重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </div>
    
    <a-table
      ref='table'
      size='default'
      rowKey='studentId'
      bordered
      :loading='loading'
      :columns='columns'
      :data-source='loadData'
      :pagination='pagination'
      @change='handleTableChange'
      showPagination='auto'
    >
      <!--学号-->
      <span slot='studentId' slot-scope='studentId'>
          {{ studentId }}
      </span>
      <!--姓名-->
      <span slot='nickName' slot-scope='nickName'>
          {{ nickName }}
      </span>
      <!--班级-->
      <span slot='status' slot-scope='clasz'>
          {{ clasz }}
      </span>
      <!--提交数目-->
      <span slot='subCount' slot-scope='subCount'>
          {{ subCount + ' / ' + topicTotal }}
      </span>
      <!--提交状态-->
      <span slot='subStatus' slot-scope='subStatus'>
          <a-badge :status='subStatus | statusTypeFilter' :text='subStatus | statusFilter' />
      </span>
      <!--提交时间-->
      <span slot-scope='updateTime' slot='updateTime'>
          {{ updateTime || '未进行任何提交' }}
      </span>
    </a-table>
  </div>
</template>

<script>
import { getSubList } from '@/api/adminTopic'
import { getTopicTotal } from '@/api/newcomerTopic'

const columns = [
  {
    title: '学号',
    width: 200,
    dataIndex: 'studentId',
    scopedSlots: { customRender: 'studentId' }
  },
  {
    title: '姓名',
    dataIndex: 'nickName',
    scopedSlots: { customRender: 'nickName' }
  },
  {
    title: '班级',
    dataIndex: 'clasz',
    scopedSlots: { customRender: 'clasz' }
  },
  {
    title: '已提交数量',
    dataIndex: 'subCount',
    scopedSlots: { customRender: 'subCount' },
    sorter: (a, b) => a.subCount - b.subCount
  },
  {
    title: '提交状态',
    dataIndex: 'subStatus',
    scopedSlots: { customRender: 'subStatus' }
  },
  {
    title: '提交题目时间',
    dataIndex: 'updateTime',
    sorter: (a, b) => a.updateTime > b.updateTime ? 1 : -1
  }
]

const statusMap = {
  '0': {
    status: 'error',
    text: '未提交'
  },
  '1': {
    status: 'processing',
    text: '部分提交'
  },
  '2': {
    status: 'success',
    text: '已完全提交'
  }
}

export default {
  name: 'CompleteSub',
  data() {
    return {
      columns,
      loading: false,
      queryParam: {},
      loadData: [],
      topicTotal: 0,
      //分页参数
      pagination: {
        size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '15', '20'],//可选的页面显示条数
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        }, //展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true //是否可以改变pageSize
      }
    }
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    }
  },
  created() {
    this.getSubList()
    getTopicTotal().then(response => {
      this.topicTotal = response.data
    })
  },
  methods: {
    getSubList() {
      this.loading = true
      this.queryParam.isSub = true
      getSubList(this.queryParam).then(response => {
        this.loadData = response.rows
        this.pagination.total = response.total
      })
      this.loading = false
    },
    //表格改变时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getSubList()
    },
    // 重置
    reset() {
      this.queryParam = {}
      this.getSubList()
    }
  }
}
</script>

<style scoped>

</style>